<style lang="less" scoped>
    /*.main_allScroll {
        background-color: #5a8dff;
    }*/

    .bg {
        width: 100%;
        /*height: 16rem;*/
        /*background-image: url("../../assets/img/qixiNewZone_bg.png");*/
        /*background-size: 100% auto;*/
        /*background-repeat: no-repeat;*/
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        position: relative;
        z-index: -1;
        &>img{
            display: block;
            width: 100%;
            height: auto;
            /*position: absolute;*/
            /*top: 0;*/
            /*left: 0;*/
            z-index: -1;
        }
    }

    .btn_bg {
        width: 4.75rem;
        /*height: 1.22rem;*/
        height: 0;
        background-image: url("../../assets/img/qixiNewZone_btnBg.png");
        background-size: 100% auto;
        background-repeat: no-repeat;
    }

    .box {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        padding: 0 .12rem .5rem;
        margin-top: -2.6rem;
        li {
            width: 2.34rem;
            margin: 0 .12rem .12rem 0;
            display: flex;
            justify-content: center;
            align-items: center;
            &:nth-child(3n){
                margin-right: 0;
            }
            img {
                width: 100%;
                height: auto;
                text-align: center;
            }
        }
    }
</style>
<template>
    <div>
        <v-header :title="title">
            <div class="backs_icon" slot="left"></div>
        </v-header>
        <div class="main_allScroll" :style="{backgroundColor: bgColor}">
            <scroller :on-refresh="refresh" :on-infinite="loadMore ? infinite : getDone" ref="qixiZoomScroller">
                <div class="bg">
                    <img :src="banner" alt="">
                    <!--<div class="btn_bg"></div>-->
                </div>
                <ul class="box">
                    <li v-for="v in list" v-on:click="gotoPage(v)"><img :src="v.activityImageUrl" :alt="v.templateActivityDescribe"></li>
                </ul>
            </scroller>
        </div>
    </div>
</template>
<script>
  export default {
    name: 'qixiZone',
    data() {
      return {
        list: [],
        loadMore: false,
        pageNum: 1,
        scrollPos: 0,
        banner: '',
        title:'',
        bgColor:'transparent'
      }
    },
    activated() {
      this.init()
    },
    deactivated: function(){
      this.scrollPos = this.$refs.qixiZoomScroller.getPosition().top
    },
    methods: {
      createInit() {
        this.list = []
        this.loadMore = false
        this.pageNum = 1
        this.scrollPos= 0
      },
      init() {
        // this.title = this.$route.query.t
        if(this.$router.isToNext){
          this.list = []
          this.loadMore = false
          this.pageNum = 1
          this.scrollPos= 0
          this.banner =  ''
          this.bgColor =  'transparent'
          this.getTemplateActivityRelationListForUser()
          this.getBanner()
        }else{
          if(this.scrollPos != 0){
            setTimeout(() => this.$refs.qixiZoomScroller.scrollTo(0, this.scrollPos, false), 10)
          }
        }

      },
      getBanner () {
        this.$ajax.getBanner({
          pageSize: 1,
          pageNum: 1,
          location: this.$route.query.bgLocation || 8,
          queryType: 'App'
        })
          .then((res)=>{
            if(res.body.content.list.length >= 1){
              this.banner = res.body.content.list[0].bannerImg
              this.bgColor = res.body.content.list[0].bgColor
              this.title = res.body.content.list[0].title || this.$route.query.t
                this.Interactive.customStatistics({type: 2, eventID: 'activity_area',map: {name: res.body.content.list[0].title, activityId: this.$route.query.activityId}})
            }
          })
      },
      getTemplateActivityRelationListForUser(done) {
        this.$ajax.activity.getTemplateActivityRelationListForUser({
          pageNum: this.pageNum,
          pageSize: 15,
          activityId: this.$route.query.activityId || '473442807801970688',
        })
          .then((res) => {
            if (done) {
              done()
            }
            let type = Object.prototype.toString.call(res.body.content.list) === '[object Array]';
            if(!type){
              return
            }
            if(this.pageNum == 1){
              this.list = res.body.content.list
            }else{
              this.list = this.list.concat(res.body.content.list)
            }
            if (res.body.content.list.length < 15) {
              this.loadMore = false
            } else {
              this.loadMore = true
              this.pageNum++
            }
          })
      },
      gotoPage(data) {
        this.$router.push("/home/product_details?type=3" + "&templateId=" + data.templateId + "&activityId=" + this.$route.query.activityId)
      },
      refresh(done) {
        // this.init()
        global.myLoad = true
        this.createInit()
        this.$refs.qixiZoomScroller.resize()
        this.getTemplateActivityRelationListForUser(done)
        this.getBanner()
      },
      infinite (done) {
        global.myLoad = true
        this.$refs.qixiZoomScroller.resize()
        this.loadMore = false
        this.getTemplateActivityRelationListForUser(done)
      },
      getDone(done) {
        this.$refs.qixiZoomScroller.finishInfinite(2);
      },
    },


  }
</script>